<template>
  <el-card shadow="always">
    <template #header>
      <div class="card-header">
        <el-row>
          <el-col :span="16">
            <el-tag type="info">{{ job.name }}</el-tag>
            <el-tag type="info">分配人:{{ job.job_add_user.name }}</el-tag>
            <el-tag type="info">执行人:{{ job.job_exec_user.name }}</el-tag>
            <el-tag>￥{{ job.amount }}</el-tag>
            <el-tag :type="job.died_line_info.tag_type">
              {{ job.died_line_info.str }}
            </el-tag>
            <el-tag :type="job.job_status_info.type">
              {{ job.job_status_info.info }}
            </el-tag>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button
              v-if="job.status == JOB_WAITE_RECEIVE"
              v-permissions="['Admin', 'Jiaowu']"
              size="small"
              type="primary"
              text
              title="修改任务"
              @click="handleEdit(job)"
            >
              修改任务
            </el-button>
            <el-button
              v-if="job.status == JOB_WAITE_RECEIVE"
              v-permissions="['Admin', 'Jiaowu']"
              size="small"
              type="danger"
              text
              title="删除该任务"
            >
              删除该任务
            </el-button>
          </el-col>
        </el-row>
        <el-row v-if="job.remark">
          <p>任务备注:{{ job.remark || '无' }}</p>
        </el-row>
      </div>
    </template>
    <el-row v-loading="loading">
      <el-col
        v-if="
          job.file_list &&
          job.operate_list &&
          (job.file_list.length > 0 || job.operate_list.length > 0)
        "
        :span="15"
      >
        <div v-if="job.file_list && job.file_list.length > 0">
          <p>任务文件清单：</p>
          <p v-for="(item, index) in job.file_list" :key="index">
            <a :href="item.xurl" target="_blank" :download="item.name">
              {{ item.name }}
            </a>
          </p>
        </div>
        <div v-if="job.operate_list && job.operate_list.length > 0">
          <p>任务操作记录</p>
          <el-table :data="job.operate_list" style="width: 100%">
            <el-table-column label="操作人" width="70" prop="operator_name" />
            <el-table-column
              label="操作类型"
              width="100"
              prop="operate_type_info.info"
            />
            <el-table-column
              label="操作时间"
              width="170"
              prop="operation_time"
            />
            <el-table-column label="操作备注" prop="operation_note" />

            <el-table-column label="附件">
              <template #default="{ row }">
                <p v-for="(item, index) in row.file_list" :key="index">
                  <a :href="item.xurl" target="_blank" :download="item.name">
                    {{ item.name }}
                  </a>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col v-if="job.status != JOB_STATUS_SUCCESS" :span="9">
        <div class="card-footer">
          <p style="text-align: left">处理任务：</p>
          <el-button
            v-if="job.status == JOB_WAITE_RECEIVE"
            @click="handleJobData(job)"
          >
            确认接单
          </el-button>
          <div
            v-if="
              job.status == JOB_WAITE_HANDLE || job.status == JOB_STATUS_REJECT
            "
          >
            <el-form label-width="80px" :model="form">
              <!-- 论文选题专属操作，选中时提交会自动更新论文的选题 -->
              <el-form-item
                v-if="job.job_type_id == 1"
                label="选题"
                prop="title"
              >
                <el-input v-model="form.clue" type="text" />
              </el-form-item>
              <el-form-item label="备注" prop="title">
                <el-input v-model="form.remark" type="textarea" />
              </el-form-item>

              <el-form-item label="附件">
                <el-upload
                  v-model:file-list="form.fileList"
                  drag
                  multiple
                  :action="baseURL + '/api/file/file'"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件上传或
                    <em>点此上传</em>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <el-button type="primary" @click="handleJobData(job)">
                提交任务数据
              </el-button>
            </div>
          </div>
          <div
            v-if="job.status == JOB_WAITE_EXAMINE"
            v-permissions="['Jiaowu', 'Admin']"
          >
            <el-form label-width="80px" :model="form">
              <el-form-item label="备注" prop="title">
                <el-input v-model="form.remark" type="textarea" />
              </el-form-item>
              <el-form-item label="附件">
                <el-upload
                  v-model:file-list="form.fileList"
                  drag
                  multiple
                  :action="baseURL + '/api/file/file'"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件上传或
                    <em>点此上传</em>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <el-button type="primary" @click="handleJobData(job, 1)">
                审核通过
              </el-button>
              <el-button type="danger" @click="handleJobData(job, 2)">
                审核不通过
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <boyi-job-edit ref="editRef" @fetch-data="fetchData" />
  </el-card>
</template>

<script>
  import { handleJob } from '@/api/boyiJob'
  import { baseURL } from '@/config'

  import BoyiJobEdit from './BoyiJobEdit'

  import { Delete, Edit } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'JobInfo',
    components: { BoyiJobEdit },
    props: {
      job: {
        type: Object,
        default: () => {
          return {
            job_add_user: {},
            job_exec_user: {},
            job_status_info: {},
            died_line_info: {},
            operate_list: [],
          }
        },
      },
    },
    emits: ['handle-job', 'fetch-data', 'fetch-job'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      // 生命周期函数
      const state = reactive({
        formRef: null,
        form: {
          remark: '',
        },
        JOB_STATUS_UNKNOW: 0, //
        JOB_WAITE_RECEIVE: 1, // 等待任务接收方确认接单
        JOB_WAITE_HANDLE: 2, // 已接单、等待任务接收方处理
        JOB_WAITE_EXAMINE: 3, // 等待任务发布方审核
        JOB_STATUS_REJECT: 4, // 任务被驳回
        JOB_STATUS_SUCCESS: 5, // 任务审核成功
        baseURL: baseURL,
        Edit: Edit,
        Delete: Delete,
        loading: false,
        editRef: null,
      })
      const close = () => {
        // state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const handleJobData = async (job, examine_status = 0) => {
        console.log(state.form)
        const file_id_list = []
        state.loading = true

        // 如果form中 clue不为空，remark为空，则。自动给remark补充内容
        if (state.form.clue) {
          if (state.form.remark) {
            state.form.remark += `\n选题：${state.form.clue}`
          } else {
            state.form.remark = `选题：${state.form.clue}`
          }
        }

        if (state.form.fileList) {
          state.form.fileList.forEach((item) => {
            file_id_list.push(item.response.data.id)
          })
        }
        try {
          await handleJob({
            job_id: job.id,
            examine_status: examine_status,
            operation_note: state.form.remark,
            clue: state.form.clue,
            operation_file: file_id_list.join(','),
          })
          $baseMessage('操作成功', 'success', 'vab-hey-message-success')
          emit('handle-job')
          close()
        } catch (error) {
          console.log(error)
        }
        state.loading = false
      }

      const handleEdit = (job) => {
        state.editRef.showEdit(job)
      }

      const fetchData = () => {
        emit('fetch-job')
        emit('fetch-data')
      }

      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      const download = (row) => {
        const { xurl } = row
        window.open(xurl)
      }

      return {
        ...toRefs(state),
        close,
        save,
        handleEdit,
        fetchData,
        download,
        handleJobData,
      }
    },
  })
</script>

<style></style>
